<template>
  <div class="bnh-login-container">
    <img class="bnh-logo" src="@/assets/img/login.png">
    <!-- 登录框 -->
    <div class="bnh-login-box">
        <div class="bnh-telBox border flex flex-align-center">
            <img src="@/assets/img/login-tel.png">
            <input type="number" placeholder="请输入您的手机号" v-model='phone'>
        </div>
         <div class="bnh-telBox flex flex-align-center">
            <img src="@/assets/img/login-password.png">
            <input type="password" placeholder="请输入密码" v-model='passWd'>
        </div>
    </div>
    <!-- 服务商协议及忘记密码 -->
    <div class="bnh-readBox flex flex-align-center">
        <img v-if='isRead' src="@/assets/img/read.png" alt="" @click="onRead">
        <img v-else='isRead' src="@/assets/img/unread.png" alt="" @click="onRead">
        <p :class="{onRead:isRead}">同意《服务商服务协议》</p>
        <p style="color:#535353;margin-left: 0.8rem" @click="onForget">忘记密码？</p>
    </div>
    <!-- 登录按钮 -->
    <div class="bnh-login-btn flex flex-align-center flex-pack-center" @click="onLogin">
        <p>登录</p>
    </div>
    <!-- 申请成为经销商 -->
    <div class="bnh-login-btn flex flex-align-center flex-pack-center bnh-cw-btn" @click="onCwbt">
        <p>申请成为服务商</p>
    </div>
    <!-- 微信登录 -->
    <div class="wechat-login-box flex flex-align-center flex-pack-center" @click='onWeChatLogin'>
        <img src="@/assets/img/wechat-login.png">
        <p>微信登录</p>
    </div>
  </div>
</template>
<script>
	import http from '../utils/http'
	import api from '../utils/api'
	import utils from '../utils/utils'
export default {
    data(){
        return{
            isRead:false, //是否阅读服务协议
            phone:'',//登录账号
            passWd:'', //登录密码
        }
    },
    created(){ //页面初始化时修改网页标题
            window.document.title = '经销商登录';
    },
    methods:{
        onRead(){ //阅读服务商协议点击事件
            this.isRead = !this.isRead;
        },
        onLogin:async function(){ //登录相关逻辑
            if(!this.isRead){
                this.$vux.toast.text('请阅读服务商协议', 'middle');
            }else{
                if(utils.isPoneAvailable(this.phone) == false || this.passWd == ''){
                    this.$vux.toast.text('登录信息有误', 'middle');
                }else{
                    let params = {
                                phone: this.phone,
                                loginPwd:this.passWd
							}
                            const res = await http.post(api.login, params);
							if (res.data.success) {
                                // 做相关数据缓存
                                localStorage.phone = res.data.loginVO.phone; //缓存手机号
                                localStorage.id = res.data.loginVO.id; // 缓存用户id;
								this.$router.push({ path: '/home?name='+res.data.loginVO.name+'&isValid='+res.data.loginVO.isValid+'&headImg='+res.data.loginVO.headImg});
							}else{
                                 this.$vux.toast.text(res.data.message, 'middle');
                            }
                }
            }
        },
        onWeChatLogin: async function(){ //微信登录
               if(this.isRead){
                   let params = {
                                openId: localStorage.openId
                            } 
                const res = await http.post(api.authLogin, params);
                if (res.data.success) {
                    // 做相关数据缓存
                    localStorage.phone = res.data.loginVO.phone; //缓存手机号
                    localStorage.id = res.data.loginVO.id; // 缓存用户id;
					this.$router.push({ path: '/home?name='+res.data.loginVO.name+'&isValid='+res.data.loginVO.isValid+'&headImg='+res.data.loginVO.headImg});
				}else{
                     this.$vux.toast.text(res.data.message, 'middle');
                }
               }else{
                     this.$vux.toast.text('请阅读服务商协议', 'middle');
               }
        },
        onForget(){ //找回密码
            this.$router.push({ path: '/forget' });
        },
        onCwbt(){ //申请加入经销商
             this.$router.push({ path: '/share' });
        }
    }
}
</script>
<style scoped>
.bnh-login-coontainer{text-align: center}
.bnh-logo{width: 3.84rem;height: auto;margin-left:1.8rem;margin-top: 1.47rem;margin-bottom: 0.78rem}
.bnh-login-box{height:2.4rem;width: 6.9rem;margin: 0 auto;background: #fffbf6}
.bnh-telBox{height: 1.2rem;}
.bnh-telBox > img{width: 0.4rem;height: auto;margin-left:0.3rem;margin-right: 0.3rem}
.bnh-telBox > input{border: 0;font-size: 0.32rem;height: 0.6rem;padding-left: 0.2rem;background:#fffbf6;}
.bnh-readBox{height: 0.5rem;width: 6.26rem;margin: 0 auto;margin-top: 0.3rem;line-height: 0.5rem}
.bnh-readBox img{height: 0.3rem;width: auto}
.bnh-readBox p{font-size: 0.3rem;color: #cccccc;margin-left: 0.14rem}
.bnh-login-btn{height: 0.95rem;width: 7rem;margin: 0 auto;border-radius: 25px;background: #ffaf3c;color: #fff;font-size: 0.32rem;margin-top: 0.66rem}
.wechat-login-box{height: 1.08rem;width: 100%;margin:0 auto;margin-top: 0.4rem;width:3rem}
.wechat-login-box img{height: 0.66rem;width: auto}
.wechat-login-box p{margin-left: 0.2rem}
.onRead{color: #000 !important;}
.bnh-cw-btn{margin-top: 0.4rem;background: #fff;border:1px solid #ffaf3c;color: #ffaf3c}
</style>


